<template>
    <a-drawer v-model:visible="visible" :title="title" :mask-closable="false" :esc-to-close="false"
        :width="width >= 600 ? 600 : '100%'">
        <a-form ref="formRef" :model="form" size="large" auto-label-width>
            <a-form-item label="头像" field="avatar">
                <a-upload :file-list="avatarList" accept="image/*" :show-file-list="false" list-type="picture-card"
                    :show-upload-button="true" :on-before-upload="onBeforeUpload">
                    <template #upload-button>
                        <Avatar :src="avatarList[0].url" :name="form.avatarname" :size="100" trigger>
                            <template #trigger-icon><icon-camera /></template>
                        </Avatar>
                    </template>
                </a-upload>
            </a-form-item>
        </a-form>
    </a-drawer>

    <a-modal v-model:visible="avatarVisible" title="上传头像" :width="width >= 400 ? 400 : '100%'" :footer="false" draggable
        @close="reset">
        <a-row>
            <a-col :span="14" style="width: 200px; height: 200px">
                <VueCropper ref="cropperRef" :img="avatarOptions.img" :info="true" :auto-crop="avatarOptions.autoCrop"
                    :auto-crop-width="avatarOptions.autoCropWidth" :auto-crop-height="avatarOptions.autoCropHeight"
                    :fixed-box="avatarOptions.fixedBox" :fixed="avatarOptions.fixed" :full="avatarOptions.full"
                    :center-box="avatarOptions.centerBox" :can-move="avatarOptions.canMove"
                    :output-type="avatarOptions.outputType" :output-size="avatarOptions.outputSize"
                    @real-time="handleRealTime" />
            </a-col>
            <a-col :span="10" style="display: flex; justify-content: center">
                <div :style="previewStyle">
                    <div :style="previews.div">
                        <img :src="previews.url" :style="previews.img" alt="" />
                    </div>
                </div>
            </a-col>
        </a-row>
        <div style="text-align: center; padding-top: 30px">
            <a-space>
                <a-button type="primary" @click="handleAvatarUpload">确定</a-button>
                <a-button @click="reset">取消</a-button>
            </a-space>
        </div>
    </a-modal>
</template>

<script setup lang="ts">
import { uploadAvatar } from '@/apis/system';
import getAvatar from '@/utils/avatar';
import { Message, type FileItem } from '@arco-design/web-vue';
import { ref } from "vue";
import { VueCropper } from 'vue-cropper';
import 'vue-cropper/dist/index.css';

const visible = ref(false)
const form = { avatarname: 'avatar.png' }
const title = '头像上传'
const width = 580

const avatar = {
    uid: '-2',
    name: 'avatar.png',
    url: ''//userInfo.value.avatar,
}
const avatarList = ref<FileItem[]>([avatar])
const fileRef = ref(reactive({ name: 'avatar.png' }))
const avatarOptions: cropperOptions = reactive({
    img: '',
    autoCrop: true,
    autoCropWidth: 160,
    autoCropHeight: 160,
    fixedBox: true,
    fixed: true,
    full: false,
    centerBox: true,
    canMove: true,
    outputSize: 1,
    outputType: 'png',
})

const avatarVisible = ref(false)
// 打开裁剪框
const onBeforeUpload = (file: File): boolean => {
    fileRef.value = file
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
        avatarOptions.img = reader.result
    }
    avatarVisible.value = true
    return false
}


const previews: any = ref({})
const previewStyle: any = ref({})
// 实时预览
const handleRealTime = (data: any) => {
    previewStyle.value = {
        width: `${data.w}px`,
        height: `${data.h}px`,
        overflow: 'hidden',
        margin: '0',
        zoom: 100 / data.h,
        borderRadius: '50%',
    }
    previews.value = data
}

const cropperRef = ref()
// 上传头像
const handleAvatarUpload = async () => {
    cropperRef.value.getCropBlob((data: any) => {
        const formData = new FormData()
        formData.append('avatarFile', data, fileRef.value?.name)
        uploadAvatar(formData).then((res) => {
            //userInfo.value.avatar = res.data.avatar
            console.log("avatar:" + res.data.avatar)
            avatarList.value[0].url = getAvatar(res.data.avatar, undefined)
            reset()
            Message.success('更新成功')
        })
    })
}

// 重置
const reset = () => {
    fileRef.value = { name: '' }
    avatarOptions.img = ''
    //visible.value = false
    avatarVisible.value = false
}

// 新增
const onAdd = () => {
    //   reset()
    //   dataId.value = ''
    visible.value = true
}

defineExpose({ onAdd })
</script>

<style scoped lang="scss">
:deep(.arco-avatar-trigger-icon-button) {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background-color: #e8f3ff;

    .arco-icon-camera {
        margin-top: 8px;
        color: rgb(var(--arcoblue-6));
        font-size: 14px;
    }
}

.body {
    display: flex;
    flex-direction: column;
    padding: 28px 10px 20px 10px;

    .btn {
        cursor: pointer;
    }

    &>section {
        flex: 1 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 32px 0 50px;

        .name {
            font-size: 20px;
            margin: 20px 0;
        }

        .id {
            span {
                font-size: 12px;
                font-weight: 400;
                line-height: 20px;
                padding: 0 6px;
                color: var(--color-text-3);
            }
        }
    }

    &>footer .footer_item {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 12px;
    }
}

.footer {
    margin: 0 -16px;
    padding-top: 16px;
    font-size: 12px;
    text-align: center;
    border-top: 1px solid var(--color-border-2);
}
</style>